﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>blockingnav</title>

    <!-- WinJSContrib.Core references -->
    <script src="./scripts/jquery-2.1.1.js"></script>
    <script src="./scripts/winjscontrib/jquery.mcnext.WinJS.js"></script>
    <script src="./scripts/winjscontrib/mcnext.ui.utils.js"></script>


    <link href="blockingnav.css" rel="stylesheet" />
    <script src="blockingnav.js"></script>
</head>
<body>
    <div class="blockingnav fragment">
        <header class="page-header" aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">blocking navigation</span>
            </h1>
            <div class="codelink" data-codepage="./pages/core/blockingnavigation/blockingnav"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>
        <section class="desc-screen" aria-label="Main content" role="main">
            <div class="bloc-description">
                <p>
                    The custom navigators allows for more control over navigation. For example, you could prevent navigation from occuring within your page.

                    This is especially usefull when you need to complete user input before allowing navigation, or to prevent the user from losing unsaved modifications.
                </p>
                <p>
                    To prevent navigation, your page must implement a function called "canClose". If this function does not return true, the navigation will be canceled.
                </p>
                <p>
                    This mecanism will work on pages and on all controls based on the custom navigator (like tab or childview flyout).
                </p>
            </div>
            <div></div>
            <div class="bloc-content">
                <p>You will not be able to navigate to another page, including by clicking the backbutton, until you check the checkbox bellow</p>
                <input type="checkbox" id="cbxblocking" />
            </div>
        </section>
    </div>
</body>
</html>
